<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>审批记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
    <style>
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
      }
      .fixed-title span{
        display: inline-block;
        width: 28%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
      }
      .fixed-title span:first-child{
        width: 15%;
      }
      .fixed-title span:last-child{
        width: 35%;
      }
      .list{
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      .list::after{
       position: absolute;
       content: '';
       height: 1px;
       background-color: #EEEEEE;
       bottom: 0;
       left: 15px;
       right: 15px;
      }
      .list>div{
        width: 25%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      .list>div:first-child{
        width: 15%;
      }
      .list>div:last-child{
        width: 35%;
      }
    </style>
	</head>
	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">审批记录</h1>
      </header>
      <div class="mui-content bg-white">
        <div class="fixed-title">
          <span>ID</span>
          <span>时间</span>
          <span>操作人</span>
          <span>操作记录</span>
        </div>
        <div class="list align-center" v-for="item in list">
          <div>{{item.id}}</div>
          <div>{{item.createDate}}</div>
          <div>{{item.createUserName}}</div>
          <div>
            <div class="text-green" v-if="item.status==0">新建</div>
            <div v-if="item.status==1">
              <div class="text-green">已通过</div><div>审批意见：{{item.remark}}</div>
            </div>
            <div v-if="item.status==2">
              <div class="text-red" v-if="item.status==2">已驳回</div><div>审批意见为：{{item.remark}}</div>
            </div>
            </div>  
        </div>
        <!-- <div class="list">
          <div>1</div>
          <div>2020-07-20 16:20:45</div>
          <div>满指纹</div>
          <div><div class="text-green">审批通过</div><div>审批意见为12213</div></div> 
        </div>
        <div class="list">
          <div>1</div>
          <div>2020-07-20 16:20:45</div>
          <div>满指纹</div>
          <div><div class="text-green">审批通过</div><div>审批意见为12213</div></div>    
        </div> -->
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var mask = null;
      var detailVm = null;
      var cv = null; // 当前webview
      var pageId = ""; //获取详情id
      mui.plusReady(function() {
        cv = plus.webview.currentWebview();
        pageId = cv.pageId || '';
        console.log(pageId)
        detailVm.getDetail(pageId)
      })
      detailVm = new Vue({
        el: "#container",
        data: {
          list: []
        },
        created: function() {},
        methods: {
          
          getDetail: function(pageId) {
            plus.nativeUI.showWaiting('加载中...');
            var that = this
            mui.baseApp.httpRequst("/api/taskRecord/queryAll/" + pageId, {}, function(data) {
              plus.nativeUI.closeWaiting();
              that.list = data
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          }
        },
    
      })
    </script>
	</body>
</html>
